<template>
    <div class="flex flex-col max-w-[102rem] mx-auto">
        <div class="px-4 py-6 border border-surface-200 dark:border-surface-800 flex justify-center items-center flex-col gap-4">
            <span class="text-surface-950 dark:text-surface-0 font-bold text-4xl leading-tight text-center"> Features </span>
            <span class="text-muted-color text-center leading-tight">The ultimate set of Ul Components powered by PrimeVue</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 w-full md:gap-x-6 lg:gap-6">
            <div class="flex flex-col">
                <div class="h-6 px-6 w-full">
                    <div class="h-full w-full border-x border-surface-200 dark:border-surface-800 block"></div>
                </div>
                <div class="p-4 border border-surface-200 dark:border-surface-800 w-full animated-border">
                    <div class="p-6 shadow-lg border border-transparent dark:border-surface-800 bg-surface-0 dark:bg-surface-900 min-h-44">
                        <div class="flex items-center gap-2 mb-4">
                            <span class="bg-primary-100 text-primary-950 dark:bg-primary-400/30 dark:text-primary-100 rounded-md h-8 w-8 inline-flex items-center justify-center">
                                <i class="pi pi-star" />
                            </span>
                            <span class="font-semibold text-surface-950 dark:text-surface-0">50+ Components</span>
                        </div>
                        <span class="text-muted-color">A comprehesive UI component suite crafted with TypeScript to meet all your requirements.</span>
                    </div>
                </div>
                <div class="flex-1 px-6 w-full hidden lg:block">
                    <div class="h-full w-full border-x border-surface-200 dark:border-surface-800 block"></div>
                </div>
            </div>

            <div class="flex flex-col">
                <div class="h-6 px-6 w-full">
                    <div class="h-full w-full border-x border-surface-200 dark:border-surface-800 block"></div>
                </div>
                <div class="p-4 border border-surface-200 dark:border-surface-800 w-full animated-border">
                    <div class="p-6 shadow-lg border border-transparent dark:border-surface-800 bg-surface-0 dark:bg-surface-900 min-h-44">
                        <div class="flex items-center gap-2 mb-4">
                            <span class="bg-primary-100 text-primary-950 dark:bg-primary-400/30 dark:text-primary-100 rounded-md h-8 w-8 inline-flex items-center justify-center">
                                <i class="pi pi-prime" />
                            </span>
                            <span class="font-semibold text-surface-950 dark:text-surface-0">Unstyled PrimeVue</span>
                        </div>
                        <span class="text-muted-color">Powered by the Unstyled PrimeVue components with advanced customization options.</span>
                    </div>
                </div>
                <div class="h-6 lg:h-auto lg:flex-1 px-6 w-full hidden lg:block">
                    <div class="h-full w-full border-x border-surface-200 dark:border-surface-800 block"></div>
                </div>
            </div>

            <div class="flex flex-col">
                <div class="h-6 px-6 w-full">
                    <div class="h-full w-full border-x border-surface-200 dark:border-surface-800 block"></div>
                </div>
                <div class="p-4 border border-surface-200 dark:border-surface-800 w-full animated-border">
                    <div class="p-6 shadow-lg border border-transparent dark:border-surface-800 bg-surface-0 dark:bg-surface-900 min-h-44">
                        <div class="flex items-center gap-2 mb-4">
                            <span class="bg-primary-100 text-primary-950 dark:bg-primary-400/30 dark:text-primary-100 rounded-md h-8 w-8 inline-flex items-center justify-center">
                                <i class="pi pi-palette" />
                            </span>
                            <span class="font-semibold text-surface-950 dark:text-surface-0">Tailwind</span>
                        </div>
                        <span class="text-muted-color">Take full control over component styling with the convenience of the Tailwind v4 CSS utilities.</span>
                    </div>
                </div>
                <div class="h-6 hidden lg:h-40 px-6 w-full md:block">
                    <div class="h-full w-full border-x border-surface-200 dark:border-surface-800 block"></div>
                </div>
            </div>

            <div class="flex flex-col">
                <div class="h-6 px-6 w-full">
                    <div class="h-full w-full border-x border-surface-200 dark:border-surface-800 block"></div>
                </div>
                <div class="p-4 border border-surface-200 dark:border-surface-800 w-full animated-border">
                    <div class="p-6 shadow-lg border border-transparent dark:border-surface-800 bg-surface-0 dark:bg-surface-900 min-h-44">
                        <div class="flex items-center gap-2 mb-4">
                            <span class="bg-primary-100 text-primary-950 dark:bg-primary-400/30 dark:text-primary-100 rounded-md h-8 w-8 inline-flex items-center justify-center">
                                <i class="pi pi-check" />
                            </span>
                            <span class="font-semibold text-surface-950 dark:text-surface-0">Accessible</span>
                        </div>
                        <span class="text-muted-color">Designed with accessibility in mind featuring first class support WCAG AA compliance.</span>
                    </div>
                </div>
                <div class="h-6 lg:h-auto lg:flex-1 px-6 w-full">
                    <div class="h-full w-full border-x border-surface-200 dark:border-surface-800 block"></div>
                </div>
            </div>
        </div>
    </div>
</template>
